<%= container do %>
  <header class="main-content-header">
    <h2 class="m-0">Badges, Tags & Progress&nbsp;Bars</h2>
  </header>

  <div class="mb-3">
    <span class="badge badge-primary">Primary</span>
    <span class="badge badge-secondary">Secondary</span>
    <a href="#" class="badge badge-primary">Primary</a>
    <a href="#" class="badge badge-secondary">Secondary</a>
    <span class="badge badge-primary badge-pill">Primary</span>
    <span class="badge badge-secondary badge-pill">Secondary</span>
  </div>

  <div class="mb-3">
    <span class="tag tag-primary">Primary</span>
    <span class="tag tag-secondary">Secondary</span>
    <a href="#" class="tag tag-primary">Primary</a>
    <a href="#" class="tag tag-secondary">Secondary</a>
  </div>

  <div class="mb-3">
    <div class="progress mb-1">
      <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
    </div>

    <div class="progress">
      <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
    </div>
  </div>

  <div>
    <div class="progress mb-1">
      <div class="progress-bar bg-secondary" role="progressbar" style="width: 50%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
    </div>

    <div class="progress">
      <div class="progress-bar progress-bar-striped bg-secondary progress-bar-animated" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
    </div>
  </div>
<% end %>
